<template>
  <div class="main">
    <el-row>
      <el-col
        :span="4"
        :offset="1"
        v-for="itemPP in dataList"
        :key="itemPP.building_num"
      >
        <div class="floor-wrap" v-for="(itemP, index) in itemPP.dataList">
          <div
            style="display: block; width: 100px"
            v-for="el in getFloor(itemPP)"
            :key="el"
          >
            <div class="floor" v-if="itemP.floor_num == el">
              <div
                v-for="item in getRoomNum(itemP.room_num)"
                :key="item"
                style="width: 40px"
                class="house"
                :class="
                  item.status == 1
                    ? 'red'
                    : item.status == 2
                    ? 'green'
                    : 'yellow'
                "
              >
                {{ itemP.floor_num }}-{{ item.room_num }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    title: "",
    unit: "",
    tableChoice: "",
  },
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    //设置容器高宽
  },
  methods: {
    getData(data) {
      console.log("dataList", data);

      this.dataList = data;
      this.dataList.forEach((parent) => {
        parent.dataList.reverse();
      });
    },
    getRoomNum(num) {
      return eval(num);
    },

    getFloor(data) {
      let floor_num = data.dataList.filter((item) => {
        return item.floor_num == 1;
      });
      let floorNumList = data.dataList.map((item) => item.floor_num);
      let floor = Math.max(...floorNumList);
      // console.log("floor", [...Array(floor).keys()].slice().reverse());
      // return [...Array(floor).keys()].slice().reverse();
      // console.log("floor", floor);
      return floor;
    },
    getBulidingNum(data) {
      console.log("data------", data.reverse());
      return data.reverse();
    },
  },
};
</script>

<style lang="scss">
.main {
  margin-left: 20px;
  margin-top: 100px;

  // display: inline-block;
  // flex-wrap: nowrap;

  .floor-wrap {
    // width: 1000px;
    // display: inline-block;

    .floor {
      display: flex !important;
      flex-wrap: nowrap;
      width: 1000px;
      .house {
        width: 80px;
        display: block !important;
        text-align: center;
        // display: inline-block;
        height: 20px;
        margin: 2px;
        border: 1px solid #ccc;
      }
      .red {
        background-color: red;
      }
      .yellow {
        background-color: yellow;
      }
      .green {
        background-color: green;
      }
    }
  }
}
</style>
